<template>
  <el-aside width="208px" class="normal-sidebar">
    <el-menu
      :default-active="currentRoute"
      background-color="#030B30"
      text-color="#5E7391"
      active-text-color="#fff"
      router
      class="flex-col el-menu-vertical"
    >
      <div v-for="(item, index) in menuList" class="menu-block" :key="index">
        <div class="menu-title">{{ item.title }}</div>
        <div>
          <el-menu-item
            v-for="(subMenu, menuIndex) in item.subMenus"
            :key="menuIndex"
            :index="subMenu.path"
            class="flex-row menu-item"
            :class="{
              'menu-item--active': currentRoute == subMenu.path,
            }"
          >
            <img :src="subMenu.pic" alt="" />
            <span>{{ subMenu.title }}</span>
            <span v-if="subMenu.title === '消息中心' && store.state.messageCount > 0" class="msg-num">{{
              store.state.messageCount > 99 ? '99+' : store.state.messageCount
            }}</span>
          </el-menu-item>
        </div>
      </div>
    </el-menu>
  </el-aside>
</template>
<script lang="ts" setup>
import {watch, ref, onMounted, onUnmounted} from 'vue';
import {useStore} from 'vuex';
import router from '@/router';
import icon1 from '../../assets/img/device/icon_1.png';
import icon2 from '../../assets/img/device/icon_2.png';
import icon3 from '../../assets/img/device/icon_3.png';
import icon4 from '../../assets/img/device/icon_4.png';
import icon5 from '../../assets/img/device/icon_5.png';
import icon6 from '../../assets/img/device/icon_6.png';
import personalApi from '@/api/personalApi';
import webSocket from '@/utils/websocket';

const currentRoute = ref(router.currentRoute.value.path);
const store = useStore();

watch(
  () => router.currentRoute.value.path,
  (val) => {
    currentRoute.value = val;
  },
);
interface MenuItem {
  pic: string;
  title: string;
  path: string;
}
interface MenuConfig {
  title: string;
  subMenus: MenuItem[];
}
const menuList: MenuConfig[] = [
  {
    title: '用户与设备',
    subMenus: [
      {
        pic: icon1,
        title: '单位管理',
        path: '/unitManage',
      },
      {
        pic: icon2,
        title: '用户管理',
        path: '/userManage',
      },
      {
        pic: icon3,
        title: '设备管理',
        path: '/deviceManage',
      },
    ],
  },
  {
    title: '个人中心',
    subMenus: [
      {
        pic: icon4,
        title: '个人信息',
        path: '/myInfo',
      },
      {
        pic: icon5,
        title: '账户设置',
        path: '/account',
      },
    ],
  },
  {
    title: '消息中心',
    subMenus: [
      {
        pic: icon6,
        title: '消息中心',
        path: '/msgCenter',
      },
    ],
  },
];

// 获取未读消息数量
const getMsgUnread = () => {
  personalApi
    .newsUnread()
    .then((res) => {
      if (res.status === 0) {
        store.commit('setMessageCount', res.data);
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 获取消息推送, 并保持心跳
const wsInterval = ref(null);
const getNotification = () => {
  webSocket.wsInit();
  wsInterval.value = setInterval(() => {
    webSocket.wsHeartbeat();
  }, 15000);
};

onMounted(() => {
  getMsgUnread();
  getNotification();
});

onUnmounted(() => {
  // 取消socket心跳
  clearInterval(wsInterval.value);
});
</script>
<style lang="scss" scoped>
.normal-sidebar {
  background-color: #030b30;
  height: 100%;
}

.el-menu-vertical {
  border: 0 !important;
  justify-content: center;
  padding-top: 33px;
}
.menu-block {
  margin-bottom: 40px;
  width: 100%;
}
.menu-title {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
  box-sizing: border-box;
  margin-bottom: 24px;
  padding-left: 45px;
  cursor: default;
}
.menu-item {
  box-sizing: border-box;
  font-size: 14px;
  &:hover {
    background-color: #1b2555;
  }
  &--active {
    background-color: #1b2555;
  }
  img {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 20px;
    margin-left: 25px;
  }
  .msg-num {
    width: 20px;
    height: 20px;
    margin-left: 26px;
    background: #fb4011;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
